<template>
  <el-container class="layout-container">
    <!-- 左侧导航栏 -->
    <el-aside 
      :width="isCollapse ? '64px' : '200px'"
      class="sidebar-container"
    >
      <Sidebar :isCollapse="isCollapse" @toggle-collapse="toggleCollapse" />
    </el-aside>

    <!-- 右侧内容区 -->
    <el-container direction="vertical">
      <!-- 顶部Header -->
      <el-header class="header-container">
        <Header :collapse="isCollapse" @toggle-collapse="toggleCollapse" />
      </el-header>

      <!-- 主要内容区域 -->
      <el-main class="content-container">
        <router-view v-slot="{ Component }">
          <transition name="fade-transform" mode="out-in">
            <keep-alive :include="keepAliveComponents">
              <component :is="Component" />
            </keep-alive>
          </transition>
        </router-view>
      </el-main>

      <!-- 底部Footer -->
      <el-footer class="footer-container">
        © 2024 Library System. All rights reserved.
      </el-footer>
    </el-container>
  </el-container>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import Sidebar from './components/Sidebar.vue'
import Header from './components/Header.vue'

// 侧边栏折叠状态
const isCollapse = ref(false)

// 需要缓存的组件名列表（根据路由meta配置动态获取）
const keepAliveComponents = ref([])

// 切换侧边栏折叠状态
const toggleCollapse = () => {
  isCollapse.value = !isCollapse.value
}

// 处理窗口大小变化
function handleResize() {
  if (window.innerWidth < 768) {
    isCollapse.value = true; // 在小屏幕上默认折叠侧边栏
  } else {
    isCollapse.value = false; // 在大屏幕上默认展开侧边栏
  }
}

onMounted(() => {
  handleResize(); // 初始化时设置状态
  window.addEventListener('resize', handleResize); // 添加事件监听器
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', handleResize); // 移除事件监听器
})
</script>

<style lang="scss" scoped>
.layout-container {
  height: 100vh;
  
  .sidebar-container {
    background: #001529;
    transition: width 0.3s;
    overflow: hidden;
  }

  .header-container {
    height: 60px;
    background: #ffffff;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    padding: 0 20px;
  }

  .content-container {
    flex: 1;
    padding: 20px;
    background: #f5f7fa;
    overflow-y: auto;
  }

  .footer-container {
    height: 50px;
    background: #f8f9fa;
    border-top: 1px solid #e9ecef;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6c757d;
  }

  @media (max-width: 768px) {
    flex-direction: column;
    
    .sidebar-container {
      width: 100% !important;
      height: 60px;
      position: fixed;
      bottom: 0;
      z-index: 1000;
    }

    .content-container {
      margin-bottom: 60px; // 为移动端底部导航留出空间
    }
  }
}
</style>